<script setup>
import ApiComponent from '~/components/dev/Api.vue'
import StoreComponent from '~/components/dev/Store.vue'
import RouterQueryComponent from '~/components/dev/RouterQuery.vue'
import RouterPushComponent from '~/components/dev/RouterPush.vue'
import RouterParamsComponent from '~/components/dev/RouterParams.vue'
import IconComponent from '~/components/dev/Icon.vue'
import StyleVBindComponent from '~/components/dev/StyleVBind.vue'
import UnoCSSComponent from '~/components/dev/UnoCSS.vue'
import UseMessageComponent from '~/components/dev/UseMessage.vue'
import SonFatherComponent from '~/components/dev/SonFather/Father.vue'

const $props = defineProps({
  name: {
    type: String,
    default: '鹿和'
  }
})
const $router = useRouter()
</script>

<template>
  <div>
    <n-table striped size="small">
      <thead>
      <tr>
        <th>功能</th>
        <th>内容</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <ApiComponent></ApiComponent>
      <StoreComponent></StoreComponent>
      <RouterQueryComponent></RouterQueryComponent>
      <RouterParamsComponent :name="$props.name"></RouterParamsComponent>
      <RouterPushComponent></RouterPushComponent>
      <IconComponent></IconComponent>
      <StyleVBindComponent></StyleVBindComponent>
      <UnoCSSComponent></UnoCSSComponent>
      <UseMessageComponent></UseMessageComponent>
      <SonFatherComponent></SonFatherComponent>
      </tbody>
    </n-table>
  </div>
</template>
<route>
{"meta":{"title":"基础功能示例","icon":"i-ic-round-code"}}
</route>